<template>
  <div class="text-center">
    <div class="flex justify-around py-10 w-880px mx-auto">
      <div v-for="item in 8" :key="item">
        {{ item }}
      </div>
    </div>
    <div ref="layoutRef" class="grid-layout overflow-hidden">
      <div
        v-for="(item, index) in data"
        @click="handleClick(item, $event)"
        :class="[getSizeClass(item).size, 'py-[20px] px-[10px]']"
        :key="item.id"
      >
        {{ item.name }}
        <hr />
        {{ index }}
      </div>
    </div>
    <div>点击的元素在{{ clickLayout.row }}行{{ clickLayout.col }}列</div>
  </div>
</template>

<script setup>
let data = ref([
  {
    id: '36070xk8qtlmy9vndg',
    type: 'widget',
    widgetName: 'calendar',
    widgetSize: 'large',
    name: 'test5',
  },
  {
    id: 'e4t4ax58b0lmy9vfdu',
    type: 'widget',
    widgetName: 'calendar',
    widgetSize: 'large',
    name: 'test5',
  },
  {
    id: 'eu8la7r2otlmszzish',
    type: 'widget',
    widgetName: 'calendar',
    widgetSize: 'large',
    name: 'test5',
  },
  {
    id: 'rir9w21umzlmy9vi84',
    type: 'widget',
    widgetName: 'calendar',
    widgetSize: 'medium',
    name: 'test7',
  },
  {
    id: 'wxwa45fl0tln16jcm2',
    type: 'image-icon',
    name: 'test6',
    url: 'https://www.gaoding.com/utms/36723580b2d14fb98fa66d3b1a67343a',
    bgc: 'rgba(32, 84, 244, 1)',
    image:
      'https://static.naivetab.com/icons/tools/41f5eedab1499183ea995f4f.png',
  },
  {
    id: 'zyf3rn67h7ln16jd1a',
    type: 'image-icon',
    name: 'test6',
    url: 'https://www.gaoding.com/utms/36723580b2d14fb98fa66d3b1a67343a',
    bgc: 'rgba(32, 84, 244, 1)',
    image:
      'https://static.naivetab.com/icons/tools/41f5eedab1499183ea995f4f.png',
  },
  {
    id: 'estrfz2imkln16jcxo',
    type: 'image-icon',
    name: 'test6',
    url: 'https://www.gaoding.com/utms/36723580b2d14fb98fa66d3b1a67343a',
    bgc: 'rgba(32, 84, 244, 1)',
    image:
      'https://static.naivetab.com/icons/tools/41f5eedab1499183ea995f4f.png',
  },
  {
    id: 'p3sf5pxhbvln16jctu',
    type: 'image-icon',
    name: 'test6',
    url: 'https://www.gaoding.com/utms/36723580b2d14fb98fa66d3b1a67343a',
    bgc: 'rgba(32, 84, 244, 1)',
    image:
      'https://static.naivetab.com/icons/tools/41f5eedab1499183ea995f4f.png',
  },
]);

const getSizeClass = (item) => {
  const widgetWeights = {
    small:
      'col-span-1 row-span-1  flex flex-col justify-center items-center small-icon',
    medium: 'col-span-2 row-span-2 medium-icon',
    large: 'col-span-4 row-span-2 large-icon',
  };

  const widgetType = {
    widget:
      'w-[calc(100%))] h-[calc(100%-var(--icon-name-height))]  rounded-[var(--icon-medium-radius)] overflow-hidden',
    icon: 'w-[var(--icon-size)] h-[var(--icon-size)]  rounded-[var(--icon-small-radius)] overflow-hidden',
  };

  const size = widgetWeights[item.widgetSize || 'small'];
  const type = widgetType[item.type];

  return { size, type };
};

function getLayout(item, $event) {
  console.log('item :>> ', item);
  const e = $event;
  const index = data.value.findIndex((v) => v.id === item.id);
  console.log('index :>> ', sumNumBeforeIndex(data.value, index));

  const rect = e.target.getBoundingClientRect();
  console.log('rect :>> ', rect);
}

// const Sizes = {
//   large: 2 * 4,
//   medium: 2 * 2,
//   small: 1,
// };
const layoutRef = ref(null);
const clickLayout = reactive({ row: -1, col: -1 });
const handleClick = (item, $event) => {
  console.log('item :>> ', item);
  const e = $event;
  const rect = layoutRef.value.getBoundingClientRect();
  console.log('rect :>> ', rect);

  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  console.log('x, y :>> ', x, y);
  const blockSize = parseInt('110px');
  const col = Math.floor(x / blockSize) + 1;
  const row = Math.floor(y / blockSize) + 1;

  clickLayout.col = col;
  clickLayout.row = row;
};
</script>

<style scoped>
.grid-layout {
  width: 880px;
  height: 480px;
  display: grid;
  margin: 0px auto;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
  grid-auto-flow: row dense;
  gap: 10px;
}

.large-icon {
  background-color: skyblue;
}

.medium-icon {
  background: pink;
}

.small-icon {
  background-color: rebeccapurple;
}
</style>
